<template>
  <div class="operation-layout full-screen">
    <div class="tool-window-row">
      <instance-window v-show="openWindow === 'tool-instance'"></instance-window>
      <role-window v-show="openWindow === 'tool-role'"></role-window>
      <hire-window v-show="openWindow === 'tool-hire'"></hire-window>
      <shop-window v-show="openWindow === 'tool-shop'"></shop-window>
      <item-window v-show="openWindow === 'tool-item'"></item-window>
      <cg-dialog class="tool-setting-dialog" v-model:visible="toolSettingVisible" title="设置">
        <setting-window @setting-action="settingAction"></setting-window>
      </cg-dialog>
    </div>
    <div class="tool-bar-row">
      <tool-bar v-model="openWindow" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ref, watch } from 'vue'
import toolBar from './operationComponents/toolBar.vue'
import roleWindow from './operationComponents/roleWindow.vue'
import hireWindow from './operationComponents/hireWindow.vue'
import instanceWindow from './operationComponents/instanceWindow.vue'
import shopWindow from './operationComponents/shopWindow.vue'
import itemWindow from './operationComponents/itemWindow.vue'
import settingWindow from './operationComponents/settingWindow.vue'

const router = useRouter()

defineOptions({
  name: 'operation-layout'
})

const openWindow = ref('')
const toolSettingVisible = ref(false)

watch(toolSettingVisible, () => {
  if (toolSettingVisible.value === true) {
    openWindow.value = 'tool-setting'
  } else {
    openWindow.value = ''
  }
})

watch(openWindow, () => {
  if (openWindow.value === 'tool-setting') {
    toolSettingVisible.value = true
  } else {
    toolSettingVisible.value = false
  }
})

const settingAction = (action: string) => {
  if (action === 'exit') {
    router.back()
  }
}
</script>

<style lang="scss">
.operation-layout {
  display: flex;
  flex-direction: column;

  .tool-window-row {
    flex: 1;
    height: 0;
  }

  .tool-bar-row {
    flex: 0;
  }

  .window-content {
    background-color: aliceblue;
    height: 100%;
    display: flex;
    overflow: hidden;

    .content-col {
      flex: 1;
    }

    .content-col-box {
      background-color: #fff;
      border: 1px solid #666;
      height: 100%;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
    }
  }

  .tool-setting-dialog {}

  .gird-content {
    padding: 10px;

    .cg-image {
      width: 100%;
      display: inline-block;
      pointer-events: none;
    }
  }

  .cg-gird-item {
    border: 4px solid #999999;
    border-radius: 10px;
    padding: 0;

    .gird-item-content {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .gird-title {
      white-space: nowrap;
      flex: 1;
      display: flex;
      user-select: none;
      align-items: center;
      justify-content: center;
      font-size: 1.25rem;
    }

    &.is-active {
      border-color: #ff3c3c;
    }

    cursor: pointer;
    user-select: none;
  }

  .scrollbar-row {
    height: 0;
    flex: 1;
    position: relative;
  }

  .tool-row {
    padding: 10px;
    text-align: right;
    border-top: 1px solid #eeeeee;

    .cg-button {
      width: 8rem;
    }
  }
}
</style>
